<script lang="ts" setup>
import { reactive, ref } from "vue"
import { ElTable, FormInstance } from "element-plus"
import { sizeDate, Y, M, D, shortcuts } from "@/utils/dateSet"
import { Search, Refresh, RefreshRight } from "@element-plus/icons-vue"

// 接口
import { getShopSalesList } from "@/api/SZ/shopSales"
import { getqueryTeamName } from "@/api/SZ/SZXxfy"
const loading = ref(true)
defineOptions({
  name: "shopSales"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
const shopList = ref<any>([])

/**店铺数据 */
const getShopList = () => {
  getqueryTeamName().then((res: any) => {
    if (res.code == 200) {
      shopList.value = res.data
      // console.log(res)
    }
  })
}
getShopList()
//清除查询日期
const clearDate = (val: any) => {
  // console.log(val)
  if (!val) {
    searchData.searchDate = []
  }
}

// #region 查
const tableTotal = ref<number>()
const tableData = ref<any[]>([])
const getList = () => {
  getShopSalesList({
    state: searchData.state,
    startTime:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[0]).getTime() : "",
    endTime: searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[1]).getTime() : ""
  })
    .then((res: any) => {
      tableData.value = res.data
      tableTotal.value = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
      loading.value = false
    })
}
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  searchDate: [
    new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 7,
    new Date(Y.value, M.value, D.value, 23, 59, 59)
  ],
  state: false
})
const resetSearch = () => {
  searchFormRef.value?.resetFields()

  getList()
  console.log("重置")
}
const handleSearch = () => {
  getList()
  console.log("查询")
}
getList()
const handleRefresh = () => {
  getList()
}
// #endregion
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="searchDate" label="日期">
          <el-date-picker
            v-model="searchData.searchDate"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :size="sizeDate"
            :default-time="defaultTime1"
            @change="clearDate"
          />
        </el-form-item>
        <el-form-item prop="shopId" label="店铺" style="display: none">
          <el-select v-model="searchData.shopId" clearable filterable multiple placeholder="请选择">
            <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="state" label="剔除废单">
          <el-switch v-model="searchData.state" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 中间部分 -->
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div />
        <div>
          <el-tooltip content="下载">
            <el-link
              type="primary"
              :underline="false"
              :href="`api/sz/storeSales/downExcel?startTime=${new Date(
                searchData?.searchDate[0]
              ).getTime()}&endTime=${new Date(searchData?.searchDate[1]).getTime()}&state=${searchData.state}`"
              Download
              style="margin-right: 20px; font-size: 12px; vertical-align: baseline"
              >下载数据</el-link
            >
          </el-tooltip>
          <el-tooltip content="刷新表格">
            <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
          </el-tooltip>
        </div>
      </div>
      <!-- 中间渲染内容 -->
      <div class="table-center">
        <el-table :data="tableData" show-summary v-horizontal-scroll="'always'">
          <el-table-column label="排名" align="center" prop="排名" />
          <el-table-column label="订单来源" align="center" prop="订单来源" />
          <el-table-column label="废单量" align="center" prop="废单量" />
          <el-table-column label="失败拦截" align="center" prop="失败拦截" />
          <el-table-column label="录单量" align="center" prop="录单量" />
          <el-table-column label="发货量" align="center" prop="发货量" />
          <el-table-column label="占录单发货率" align="center" prop="占录单发货率">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.占录单发货率" />
            </template>
          </el-table-column>
          <el-table-column label="失败量" align="center" prop="失败量" />
          <el-table-column label="占录单失败率" align="center" prop="占录单失败率">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.占录单失败率" />
            </template>
          </el-table-column>
          <el-table-column label="激活量" align="center" prop="激活量" />
          <el-table-column label="占录单激活率" align="center" prop="占录单激活率">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.占录单激活率" />
            </template>
          </el-table-column>
          <el-table-column label="占发货激活率" align="center" prop="占发货激活率">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.占发货激活率" />
            </template>
          </el-table-column>
          <el-table-column label="总负责人" align="center" prop="总负责人" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
// .box-card {
//   height: 70px;
//   margin-bottom: 20px;
// }
.search-wrapper {
  margin-bottom: 20px;
}
.middle-top {
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
/* 下架套餐显示灰色 */
.Xjstate {
  color: #afadad;
  /* background: #e7e7e7; */
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
=
